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Here's what an <img> tag looks like. Note that the path begins 
with a slash (/). 


<img src='/lawrence-liang-small.jpg' 


alt='photo of Lawrence Liang speaking at a 
podium' width='300' height='206'/> 


And here's a link to another page: 


<a href='/about.html'>About Lawrence Liang</a> 


Have fun! 


=) General tips 


Don't make a page that says "You've been pwned!" or "Your 
computer is now infected with a virus." You'll scare people for 
no reason. 


Don't use an SSID that's the same or similar to one froma 
specific business or institution. Calling your network "Starbucks 
wifi," for example, could potentially get you in legal trouble. 


=) Credits 


Method 1 is based on the following 2 tutorials: 


-  https://gist.github.com/Cyclenerd/7c9cba13360ec1lec9d 
2ea36e50c7ff77 


- http://melissamerritt.epizy.com/wifi-joke/wifi-joke.html 


Method 2 is based on this project: 


https://git.vwwwwvaria.org/then/ESP8266-captive-ota-spiffs 


The Wemos D1 mini 
is a low-cost, 
low-power 
development board 
based on the ESP8266 
wi-fi chip. You can 
use it to host a web 
page that anyone 
nearby can access. 


Imagine you're on a train, in an area with poor cell reception. 
You look for available wi-fi networks, and there's one called 
"Free Reading Wi-fi." When you connect, you get a popup 
window that says, "Sorry, this network doesn't connect to the 
internet! Enjoy this essay!" And what follows is something you 
never would've read otherwise. 


This zine will show you how to make your own wi-fi access 
point and web server using a Wemos D1 mini board. The 
Wemos D1 mini is small, cheap, and easy to program using the 
Arduino IDE. It's also incredibly power efficient. Plug one into a 
medium-sized USB power bank, and it'll easily run for a couple 
days. 


Here are some things you can do with a wi-fi captive portal Look for the wi-fi network Free Reading Wifi. When you 
using aWemos D1 mini: connect, you should see a popup window that looks like this: 


> Share an article/essay/political slogan with anyone who * dom cree pees Wi, 
happens to be at the coffee shop. 


> Promote an upcoming event without using social media. 


> Share a poetry anthology with other commuters on 
your train. 


> Share maps and information on a hiking trip without 


Sd ec The Man Who Mistook His Wife for a Book 


> Use several wi-fi boards to send a message using SSID 


names alone. by Lawrence Liang 
A Ca ptive po rta | i sa page d i S p | ayed to the user whe n they Anumber of critical interventions in debates on the impact of intellectual property on 
fi : fi d | h knowledge and culture are framed by a critique of the expansionist tendency of the global 
connect to a WI-Tl access pol nt, orten used to let the user intellectual property regime. There are calls for an institutional overhaul of the intellectual 
: . . property regime to make it more equitable and to enable greater access to knowledge and 
authenticate before connecting to the internet. You may have ren — 


seen wi-fi captive portals in coffee shops and hotels. 


To make your own captive portal, you can edit the files in the 


You don't need to know how to program to complete this } ae ; : 
data directory. The HTML file index.html will always load first. 


tutorial! Knowing some HTML will help, but it isn’t necessary. 


You'll start by installing the Arduino IDE (integrated a P Ge a = ae & 
development environment), which is the application you'll use — . 
to program your Wemos D1 mini. oe B about.htmi 831 bytes HTML text Today at 9:45 AM 

B Arduino BB index.htmi 43KB HTML text Today at 9:47 AM 
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When the upload is finished, you'll see the message SPIFFS 
Image Uploaded beneath the code editor. 


Fitnder STASSIV 
#define STASSID "Free Reading Wifi” 
#endif 


IPAddress apIP(192, 168, 4, 1); 
const char* ssid = STASSID; 


Leaving... 


Hard resetting via RTS pin... 


CITA:~1019KB), v2 Lower Memory, Disabled, None, Only Sketch, 921600 on /dev/cu.usbserial-1420 


Click the Upload button in the top left to compile and upload 
the project code to your Wemos D1 mini. 


@ © © Free_Reading_Wifi| Arduino 1.8.20 Hourly Buil 


Upload 


Free_Reading_Wifi 


When the upload is done, you'll see Done uploading beneath 
the code editor. 


Fitnder STASSIU 
#define STASSID "Free Reading Wifi" 
#endif 


IPAddress apIP(192, 168, 4, 1); 
const char* ssid = STASSID; 


CTA:~1019KB), v2 Lower Memory, Disabled, None, Only Sketch, 921600 on /dev/cu.usbserial-1420 


Install the Arduino IDE (macOS) 


For this project you'll need to use version 1.8.x of the Arduino 
IDE. If you aren't sure what version you're using, go to the 
menu bar and select Arduino > About Arduino. 


To download the Arduino IDE, go to the following URL and click 
Mac OS X: 


https: //www.arduino.cc/en/software 


Open the .dmg file you just downloaded and drag the Arduino 
IDE application file to your Applications folder. 


Install the Arduino IDE (Windows) 


Go to the following URL and download the Arduino IDE for 
WIndows. Follow the instructions to install it on your machine. 


https: //www.arduino.cc/en/software 


Install the Arduino IDE on 


Debian-based Linux (e.g., Ubuntu) 
Installation method 1: Snap package manager 


Open a terminal window and run the following command to 
install the Arduino IDE using the Snap package manager. You'll 
need to enter your password, and it will take a few minutes to 
install. 


sudo snap install arduino 


Now run the following command to add your username to the 
dialout group. This will let you program the board via USB. 


sudo usermod -a -G dialout $USER 


Restart your computer. 


Open a terminal window and run the command arduino to 
start the Arduino IDE. 


Installation method 2: APT package manager 


Depending on the version of Ubuntu you're using, you may be 
able to install Arduino using the APT package manager. Simply 
type the following command in a terminal window and press 
enter. You'll need to enter your password, and it will take a few 
minutes to install. 


sudo apt-get install arduino 


Now run the following command to add your username to the 
dialout group. This will let you program the board via USB. 


sudo usermod -a -G dialout SUSER 
Run the command arduino to start the Arduino IDE. 


Installation method 3: Installer Script 


Go to the following URL and follow the steps to install the 
Arduino IDE using the installer script from https://arduino.cc: 


https://linoxide.com/how-to-install-arduino-ide-on-ubuntu-20-04 


Don't use sudo with this installer script! 


Open the directory Free_Reading_Wifi and find the file 
Free_Reading Wifi.ino. Double click it to open the project in 
the Arduino IDE. 


eee Free_Reading_Wifi 


Name ze k Date M 


~ Applications 


GD data Folder 
& Arduino B about.htmi 831 bytes AL text 
al Pictures B index.htm! 43KB H 
mm lawrence-liang-small.jpg 121 KB JPEG ima 
©) Desktop DNSServer.cpp 4KB A 
& Movies »| DNSServer.h 2KB 


Bb F B Free_Reading_Wifi.ino 
jocuments 


@® Downloads 


& Screenshots 


& Research 


In the menu bar, select Tools > ESP8266 Sketch Data Upload. 
This plugin will look for a directory called data in the project 
directory and upload its contents to SPIFFS storage on the 
ESP8266. 


lino File Edit Sketch Tools Help 
Free_Reading_Wifi| Ardu Auto Format 

Archive Sketch 

Fix Encoding & Reload 


Manage Libraries... 
part is still a work in Serial Monitor 

five portal with (Carduino) 
ted from https://git.vwwy 


Serial Plotter 


le <Arduino.h> WiFi101 / WiFiNINA Firmware Updater 
le <ESP8266WiFi .h> 

le <ESP82G66mDNS . h> ESP8266 Sketch Data Upload N 

le <WiFiUdp.h> 

le <ESP8266WebServer . h> Board: "LOLIN(WEMOS) D1 mini (clone)" 


je "./DNSServer.h" // Dns Upload Speed: "921600" 
le <FS.h> // SPIFFS 


CPU Frequency: "80 MHz" 
ler dnsServer; Flash Size: "4MB (FS:2MB OTA:~1019KB)" 
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Upload files with plugin 


To download the code you'll need, go to the following URL: 


https: ithub.com/iffybooks/pocket-wifi-portal 


Click the green Code button, then click Download ZIP. 


A iffybooks / pocket-wifi-portal & Pin = =@Unwatch 1 ~ — Y For 
Public 
<> Code © Issues 1) Pull requests © Actions Projects 0 wi 
B main ~ Go to file Add file ~ err) About 
No des 
(® iffybooks Crea B Clone ie) provide 
HTTPS SSH GitHub CLI 
Rea 
M 01_Make_the... https://github.com/iffybooks/pocket-wi  (C) 
sf Uni 
@® 02_Create_wi... Use Git or checkout with SVN using the web URL. 
wy Ost 
® 03_Captive_p.. ® 1wa 
@ Open with GitHub Desktop 
f& 04_Captive_p.. ¥Y Ofo 
® 05_Iffy_Book... [) Download ZIP 2» 
[LICENSE Initial commit 2 davs ago Releas 


Find the file you just downloaded in your Finder/File Explorer 
(pocket-wifi-portal-main.zip) and unzip it. Open the directory. 


In a new Finder/File Explorer window, open your Arduino 
sketchbook directory. In the directory 
pocket-wifi-portal-main/04_Captive_portal_approach_2, 
you'll find a directory called Free_Reading_Wifi. Drag the 
directory Free_Reading Wifi into your Arduino sketchbook 
folder. 


Install the ESP8266 software 
package 


When you open the Arduino IDE, you'll see a window that looks 
like the one below. 


@ © @ sketch_feb15b | Arduino 1.8.20 Hourly Build 2021/12/20 07:34 


sketch_feb1Sb 


void setup() { 
// put your setup code here, to run once: 


} 


void loop() { 
// put your main code here, to run repeatedly: 


} 


Arduino Uno 


Before you write any code, you'll need to install a package with 
the software required to program the ESP8266 chip. 


In the menu bar, select File > Preferences. 


@ Arduino File Edit Sketch Tools Help 


@ © About Arduino no 1.8.20 Hourly Build 2021/12/20 07:34 


=| = 
ske Services > 


oid 
// Hide Arduino | to run once: 


Hide Others 
Show All 


void ‘ 5 
// Quit Arduino to run repeatedly: 


Add the following URL (all one line) to the list of Additional 
Boards Manager URLs, then click OK. 


https: //arduino.esp8266.com/stable/ 
package esp8266com index.json 


e@ Preferences 


Network 


Sketchbook location: 


/Users/iffybooks /Documents/Arduino Browse 
Editor language: System Default (requires restart of Arduino) 
Editor font size: 12 
Interface scale: Automatic % (requires restart of Arduino) 

Theme: Default theme (requires restart of Arduino) 
Show verbose output during: compilation upload 
Compiler warnings: None i] 
Display line numbers Enable Code Folding 
Verify code after upload Use external editor 
Check for updates on startup Save when verifying or uploading 


Use accessibility features 


Additional Boards Manager URLs: /https://arduino.esp8266.com/stable/package_esp8266com_index.json 1 o 


More erence e edited directly 1 e 
/Users/iffybooks /Library/Arduino15/preferences.txt 
edit only Arduir r 


OK Cancel 


Next you'll install the software package you need to program 
the ESP8266 chip. In the menu bar, go to Tools > Board > 
Boards Manager... 


Sketch Tools Help 


feb15a Auto Format *T 


Archive Sketch 
Fix Encoding & Reload 
Manage Libraries... O#! 


Serial Monitor 
le, to ru as 
Serial Plotter 


WiFi101 / WiFiNINA Firmware Updater 


, to run Board: "Arduino Uno" > Boards Manager... xR 
Port > 
Arduino Yun 


Get Board Info 
v Arduino Uno 


Programmer: “AVRISP mkli" > Arduino Duemilanove or Diecimila 


Burn Bootloader Arduino Nano 
Arduino Mega or Mega 2560 
Arduino Mega ADK 
Arduino Leonardo 
Arduino Leonardo ETH 
Arduino Micro 


eee’ OvkOAa 
Captive portal approach 2: 

Use SPIFFS storage 

AO XX VO > OO % 
Install SPIFFS uploader plugin 


In order to upload HTML files, images, etc. to the ESP8266 chip, 
you'll first need to install a plugin. Go to the releases page and 
click ESP8266FS-0.5.0.zip to download the latest release: 


https: ithub.com/esp8266 
arduino-esp8266fs-plugin/releases 


When the download is finished, unzip the file to create a 
directory called ESP8266FS. 


Go to Arduino > Preferences and make a note of the path 
under "Sketchbook location." Go to the Finder/File Explorer 
and locate the sketchbook directory. Here's where you can 
expect to find it: 


macOS: /Users/your_username/Documents/Arduino/ 
Windows: C: \Users\your_username\Documents\Arduino\ 
Linux: /Users/your_username/Arduino/ 


In the sketchbook directory, look for a directory called tools. If 
you don't see one, you can create it yourself. 


Move the ESP8266FS directory from your Downloads folder to 
the tools directory. 


Quit the Arduino IDE and reopen it. In the Tools menu, you 
should now See ESP8266 Sketch Data Upload as one of the 
options. 


Or open a terminal window and use a base64 command. 
Here's an example, using a PNG file in the Desktop folder. 


base64 ~/Desktop/bell_hooks.png 


G@ Desktop — -zsh — 70x22 


Type "esp8266" to find the package, then click Install. 


e e Boards Manager 


Type All © esps266| 


by ESP8266 Community 

Boards Included In this package: 

Generic ESP8266 Module, Generic ESP8285 Module, Lifely Agrumino Lemon v4, ESPDulno (ESP-13 Module), Adafrult Feather HUZZAH 
ESP8266, WIFI Kit 8, Invent One, XinaBox CWO1, ESPresso Lite 1.0, ESPresso Lite 2.0, Phoenix 1.0, Phoenix 2.0, NodeMCU 0.9 (ESP-12 
Module), NodeMCU 1.0 (ESP-12E Module), Olimex MOD-WIFI-ESP8266(-DEV), SparkFun ESP8266 Thing, SparkFun ESP8266 Thing Dev, 
SparkFun Blynk Board, SweetPea ESP-210, LOLIN(WEMOS) D1 R2 & mini, LOLIN(WEMOS) D1 mini (clone), LOLIN(WEMOS) D1 mini Pro, 
LOLIN(WEMOS) D1 mini Lite, LOLIN(WeMos) D1 R1, ESPino (ESP-12 Module), ThalEasyElec's ESPino, WifInfo, Arduino, 4D Systems gen4 IoD 
Range, Digistump Oak, WiFiduino, Amperka WIFI Slot, Seeed Wio Link, ESPectro Core, Schirmilabs Eduino WIFI, ITEAD Sonoff, DOIT ESP-Mx 
Devkit (ESP8285). 

Online Help 

‘More Info. 


3.0.2 Install 


When installation is finished, click Close. 


Now go to Tools > Board > ESP8266 Boards and select 
LOLIN(WEMOS) D1 mini (clone). 


@ = Arduino File Edit Sketch Tools Help 
eee sketch_feb15a 


Auto Format eT 


Generic ESP8266 Module 
sketch feb15a 9 wu Generic ESP8285 Module 
void setupQ { Serial Monitor 3M 4D Systems gen4 IoD Range 
// put your setup code here, to ru i 
Serial Plotter L Adafruit Feather HUZZAH ESP8266 
+ ‘Amperka WiFi Slot 
WiFi101 / WIFININA Firmware Updater role dice 
> L Arduino 
void loop() . 
// put your main code here, to run Board: "Arduino Uno" > | Boards Manager... DOIT ESP-Mx Devkit (ESP8285) 
Port > aa 
q Get Board Infc Sra AVR Boats Z ee He 13 Modul 
joard info - 
_ ESPB266 Boards (3.0.2) 7 Pte le) 
Programmer: "AVRISP mkil" > ar oe 


| ESPino (ESP-12 Module) 
ESPresso Lite 1.0 
EsPresso Lite 2.0 
ITEAD Sonoff 
Invent One 
LOLIN(WEMOS) D1 R2 & mini 
LOLIN(WEMOS) D1 mini (clone) 
LOLIN(WEMOS) D1 mini Lite 
LOLIN(WEMOS) 01 mini Pro 


Burn Bootloader 


=) Select a serial port 


Next you'll use the Arduino IDE to select a serial port, which 
your computer will use to transfer data to your Wemos D1 
mini. Start by connecting your Wemos D1 mini to your 
computer with a microUSB cable. 


Some micro USB cables have a data connection, while others 
supply power but can't transfer data. If you have trouble with 
this step, try using a different micro USB cable. 


Note: If you plug your board into a different USB port, 
you'll need to repeat this step. 


Steps for Mac & Linux: 


Connect your Wemos D1 mini to your computer using a micro 
USB cable. Next you'll select the serial port your computer will 
use to communicate with your board. In the menu bar, go to 
Tools > Port and select /dev/cu.usbserial-1420. The number 
at the end will probably be different for you. 


etch Tools Help 


15a Auto Format 
Archive Sketch 
Fix Encoding & Reload 
Manage Libraries... oz 
Serial Monitor 


to ru 5 
Serial Plotter 


WiFi101 / WiFININA Firmware Updater 


‘0 run Board: "LOLIN(WEMOS) D1 mini (clone)" 
Upload Speed: "921600" 
CPU Frequency: "80 MHz" 
Flash Size: "4MB (FS:2MB OTA:~1019KB)" 
Flash Mode: "DOUT (compatible) " 
Flash Frequency: "40MHz" 
Debug port: "Disabled" 
Debug Level: "None" 
IwIP Variant: "v2 Lower Memory" 
VTables: "Flash" 
C++ Exceptions: "Disabled (new aborts on oom)" 
Stack Protection: "Disabled" 
Erase Flash: "Only Sketch" 
SSL Support: "All SSL ciphers (most compatible)" 
MMU: "32KB cache + 32KB IRAM (balanced)" 
‘Non-32-Bit Access: "Use pgm_read macros for IRAM/PROGMEM" 


vvvvvvvY vv vv vv 


Get Board Info | _/dev/cu.Bluetooth-Incoming-Port 


Idevicu.usbserial-1420 
Programmer > 


S/se5NrV/gQkmyluj zMSYV+9x1lEWCJmLSsTwSIlaCJ8ZMj 
BPD5cSsV/+YideR0kQiSwRGwgeDnqWsBCbNxAG/oh2xKHz 
icBHNBrxXvq8nesxLO2NEOQhmJErJhJV4Pn09yL63171d1C 
sak7MEJB2h61Z/FNZVikK1DXx51EsJhg/CqWnc5qF8MH2/m 
8W+nGVxGJy9LvyLec5AZ0J61jK3BWs2GrxXLMuouWWtnMeY 
Sa71Vnk5T1lduz9/su2YRvaxdo6ChLaDM1Yqc7/5VbNnSUd 
FK6HI2AdyOT3W6C4hzSPf£Lrw20900D0j xnsSM1ITHTHROnz 
soLWkkFixWkDOwemS 3AzCr+1GOdcqiA7PYNUqrg4adSRc0 
cXs 4hWJGWSVGZXGO1gNAk+nJeBaBJNPul 9tAEUiKkelIFTc 
eyPOOPhBMkJrkTX/6F1rr+G9yURoUn1jD7R7CYYNSb6RNO 
1HROb7XvL4egjFRG51An79Y1gAGnp2ZuankMitFxblEyOV 
VxIOFuthRrNOYpIGkZqhTyTgJDZHKZOmD6iH4W6cUmgiTy 
TNI80VIF7Ne12tkz1jGyul4n0yJk7r/sxfbadf5ckoagbv 
TLOcNUcs58eE44Nt 8LWEMV551kHG8zyYRbZvmsvChF5GXn 
rJINWADSFSJk4+MfqPPIJEX7CSeIPzz1tJJIT8ME992700gM 
9/hYIglUyqdQG6Vj 5n7DyB/yj4R9SpyzPL7PcK1kxiliR7 
xUsS22jrcjolkUs40wcAA+kEuxjevP94ib1lUNPzCImck/aqg 
kTxWkFyGrlkdzBFDJDagpSd0nasVRpU7/zZCpNalFHugesK 
cC8chZPr064CRfjuEuwksNJ27zFHHUsguUfKLGb1TwXQAE 
aoX4j4sSieDWBIErSYtNRHPysYerQn7jG/w/apQ7/n54wv 
E8/lwciW5102f£5CGd2qRDugBjVLLaifZ6KtBA1K1xeomRS 
4048 f8vvp1SMqhZu3/xb/idmP2Gg2AASSz2/SWYUFdcUce 
U3privw5 9ML31UH/ J 1lwADAFRWI+4MU5SBAAAAAE1FTkSuQ 
mCC' alt="high-contrast photo of bell hooks' 
[P<fjoo¥ 

Wee / Clay" 

"</body>" 

W< finite p 


You can find the complete code at the following link: 


https://github.com/iffybooks/pocket-wifi-portal/blob/main/ 
03 Captive portal approach 1/Quote Portal.ino 


Find an image that's 20KB or less, convert it to a Base64 string, 
and try adding it to your web page. 


If you do a web search for the phrase "convert image to 
base64," you'll find lots of sites that can help. 


And here's a link to the file above: 


httos://github.com/iffybooks/pocket-wifi-portal/blob/main/ 
03 Captive portal approach 1/bell hooks.png 


Here's the new HTML string, including the image: 


String responseHTML = "<!DOCTYPE html>" 

"<html lang='en'>" 

"<head>" 

"<meta charset='utf-8'>" 

"<meta name='viewport' 
content='width=device-width, 
initial-scale=1'>" 

"<title>Free Reading Wi-fi Portal</title>" 
UR<isie wll 

"o {font-family: Georgia, serif; font-size: 
200%; text-align: center; padding-top: 5S0px,7}" 
Welw (waieltlng Vasp maxeailms 0) aueee } 

"</style>" 

"</head>" 

R<oochy love Golow=" iLaelmejoaiale! SY 

U<olaigeY 

"<p>\"What we do is more important than what 
we Say or what we say we believe.\" -bell 
hooks</p>" 

"<p><img 

src='data: image/png; base64, iVBORwOKGgoAAAANSUh 
EUgAAAHTAAAB / CAMAAAAEnWaRAAAAB1BMVEX///8AAABVw 
tN+AAADaULEQVR42uyb647VMAyEx+//OggdTjdNfR1£UoR 
EhcSPXf£LFJuOMnQB5/cP7Q6HIWP4 9cBCJz5/vlxysgPwNw 
fpds8BUx67Q7Bio/OJmJXKrmUBidS12KOjhkF5IBbhFOSg 


Steps for Windows: 


Go to Tools > Port and you'll see a menu titled Serial Ports 
with a list of options such as COM3, COM4, etc. Make a mental 
note of the ports you see, or write them down. 


Connect your Wemos D1 mini to your computer, then go back 
to Tools > Port. Look for a COM port that wasn't there before, 
and select that one. 


If that doesn't work, open the Windows Device and Driver 
Installation menu. Look for "unknown devices" and update 
your USB driver. 


| Install the CH341 driver 


If you're using Windows or a Mac from mid-2018 or earlier, 
you'll need to install a driver for the CH341 chip on your 
Wemos D1 mini. The CH341 is the chip that translates data 
from your computer's USB connection to the serial connection 
on the ESP8266. 


If you're using a Mac and you aren't sure whether to install the 
CH341 driver, it's better to wait and see if you need it. Move on 
to Test 1 (below) and try to upload some code to your board. If 
it doesn't work, you can come back to this step and install the 
driver. 


Visit the following URL to download the CH341 driver: 
https: //www.wemos.cc/en/latest/ch340 driver.html 


If you're using Linux, try the next step without installing the 
driver and see if it works. If you get an error, come back to this 
step and install the following driver: 


https: ithub.com/raashidmuhammed/esp8266 


Once the driver is installed, quit the Arduino IDE and reopen it. 


This may or may not be necessary, but it can't hurt. 


Now you're ready to program your Wemos D1 mini clone 
board. Nice work! 


Se) > Ovex OA 
Test 1: Make the LED blink 
AOX VOLO) 


Let's start with a super simple program, just to make sure 
you're able to connect to the board and program it. You can 
find the example code for this project at one of the following 
URLs: 


https://iffybooks.net/pocket-wifi-portal 
https: ithub.com/iffybooks /pocket-wifi-portal 


Copy the code below into the Arduino IDE: 


void setup() { 
pinMode (LED BUILTIN, OUMP WI) 2 


} 


void loop() { 

digitalWrite(LED 1] TIN, HIGH); 
delay(1000); 
digitalWrite(LED 1] MIPILIN,, ION) 2 
delay(1000); 

} 


The code above defines two functions: setup () and loop(). 
The setup() function runs first, then the loop() function 
runs repeatedly as long as the board is plugged in. 


Or you can insert a backslash (\) before double quotes to 
escape them: 


"<p>\"What we do is more important than 
what we say or what we say we believe.\" 
-bell hooks</p>" 


_| Add a Base64-encoded image 


To include an image in a web page, you'd ordinarily use an 
<img> tag that points to an image file. The sre attribute 
specifies the images's location using either a URL or a relative 
path to a file on the same server. Here's an example of the 
latter: 


<img src='images/bell hooks.png'> 


Instead of pointing to an external file, you can encode an 
image as a Base64 string and include it in your HTML file. 
Here's an example of an <img> tag using a Base64 string for a 
very small image file (a single green pixel): 


<img src='data:image/png;base64 ,iVBORwO 
KGgoAAAANSUhHEUgAAAAEAAAABCAMAAAAoyzS7AA 
AAB1BMVEV/01gAAAC£ /yQfAAAADE1EQVR4 2mJgA 
AgwAAACAAFPbVnhAAAAAE1FTkSuQmCC' 
alt='one green pixel' /> 


Now we'll add the following image below the quote. It's a 
948-byte PNG image of bell hooks, based on a photo from her 
Flickr page that she marked as public domain. You can find the 
uncropped original here: 


https://www. flickr.com/photos/bellhooksphilosophy/36335440686 


Make a page with CSS 
formatting 


So far, you've created a web page that looks pretty plain. 
Here's some example code that will make a more 
modern-looking page. (For the moment, don't worry about 
copying it into your IDE.) 


String responseHTML = "<!DOCTYPE html>" 

"<html lang='en'>" 

"<head>" 

"<meta charset='utf-8'>" 

"<meta name='viewport' 
content='width=device-width, 
initial-scale=1'>" 

"<title>Free Reading Wi-fi Portal</title>" 

"<style>" 

Wo (eomecitemalws Ceorgile, SeEriite itomec-silues 
200%; text-align: center; padding-top: 
BOjons sj 

Uelakw i waLchela 2 z eqaims 0 amcoz }™ 

We fey lles 

"</head>" 

U<loorolhy lovererollore=" ILal@jlaiejoatiake | 

U-<elaiyysw 

"<p>\"What we do is more important than what 
we say or what we say we believe.\" —bell 
hooks</p>" 

Wee clings” 

"</body>" 

tke /aiciail >) ¢ 


Because double quotes have a special meaning to the C/C++ 
compiler, you can't use ordinary double quotes in your HTML 
code. For HTML attributes you can use single quotes, as in the 
following line: 


"<html lang='en'>" 


In the setup () function, pinMode(LED BUILTIN, OUTPUT) 
prepares the board to use the built-in LED. 


Next, the Loop () function makes the LED blink repeatedly. It 
first uses digitalWrite (LED BUILTIN, HIGH) to turn the 
LED on. Next, the function delay (1000) pauses your code for 
1000 milliseconds, or 1 second. The function 

digitalWrite (LED BUILTIN, LOW) turns off the LED, then 
delay (1000) pauses for one second. 


To compile your code, click the Verify button in the top left 
corner. 
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void setupQ) { 
pinMode(LED_BUILTIN, OUTPUT); 
} 


void loop() { 
digitalWrite(LED_BUILTIN, HIGH); 
deLay( 1000); 
digitalWriteC(LED_BUILTIN, LOW); 
de Lay( 1000); 


} 


Choose a name for your project, then click Save. Don't change 
the save location. 


= 
Save sketch folder as... 


Pocket_Wifi_Portal 


& Arduino v 
Cancel Save 


Note: The Arduino IDE may be unresponsive for 10-20 
seconds while it compiles your code. 


Next, click Upload to start uploading the program to your 
board. 


Upload 


Pocket_Wifi_Portal 


void setup() { 
pinMode(LED_BUILTIN, OUTPUT); 
} 


void loopd) f 


When the upload is complete, you'll see "Done uploading" 
below the code window. 


Sketch uses 260889 bytes (24%) of program storage space. Maximum 1S 
Global variables use 2798@ bytes (34%) of dynamic memory, Leaving 53 


WA:~1019KB), v2 Lower Memory, Disabled, None, Only Sketch, 921600 on /dev/cu.usbserial-1420 


The LED on your board should start blinking on and off. Pretty 
cool! 


Note: If you're using 
Linux or an older Mac 
and you weren't able to 
upload your code, go 
back to the previous 
section and install the 
CH341 driver. 
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Note that each line has double quotes at the beginning and 
end, and that there's a semicolon after the final line. That's the 
C/C++/Arduino syntax for defining a string over multiple lines. 
The double quotes aren't part of the HTML code. 


Trying making a few edits in the HTML! To change the page 
title, update the text between <title> and </title>. And add 
some new text between the paragraph tags <p> and </p>. 


String responseHTML = "<!DOCTYPE html1>" 
We Tonieiqn dl St 

"<head>" 

"<title>Bash6é Wifi</title>" 


"</head>" 

"<body>" 

"<p>old pond<br />frog leaping<br />splash</p>" 
We fowls" 

We Paicall Ss 9 


The example above uses the <br /> tag to indicate line breaks. 


Connect a Wemos D1 mini to your computer and click Upload 
in the top left corner of the window. When the upload is 
finished, use your phone or computer to connect to the wi-fi 
network you just created. 


=, 
v= 
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Go to the following URL, then highlight and copy the code: 


https: ithub.com/iffybooks/pocket-wifi-portal 
blob/main/03_ Captive portal approach 1 
Minimal Portal.ino 


Paste the code into the Arduino IDE window, replacing your 
previous code. Click the Verify button at the top left to make 
sure it compiles. 


Connect your Wemos D1 mini to your computer, then click 
Upload. When the upload is complete, you'll see the message 
"Done uploading" at the bottom of the code editor. 


On a laptop or phone, open your wi-fi menu. You should see a 
network called Minimal Example Wifi. 


Click/tap Minimal Example Wifi to connect to the network. If 
you wait a moment, a pop-up window should appear with the 
word "Hello!" 


Here's the code snippet (repeated from above) that contains 
HTML code for the captive portal page. It creates a string 
variable called responseHTML that begins with "<! DOCTYPE 
htm1>" and ends with "</html>". 


String responseHTML = "<!DOCTYPE html>" 
u<ioucmell SoM 
"<head>" 
"<title>A Minimal Example Page</title>" 


"</head>" 

W <body>" 
"<p>Hello!</p>" 
"</body>" 
"</html>" ; 


fe (e)LI>e Ovex OA 
Test 2: Create a wi-fi access 
point with an SSID name 
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Next you'll run a test to make sure you can create a wi-fi access 
point. The code below will broadcast a network name, or SSID 
(service set identifier), that you'll be able to see when you look 
for wi-fi networks on your laptop or phone. 


In the Arduino IDE, update your code to match the example 
below. You'll need to add the three lines in bold. 


#include <ESP8266WiFi.h> 


void setup() { 
pinMode (LED BUILTIN, OQUANEUI) 2 
WiFi.mode (WIFI_AP) ; 
WiFi.softAP("Free Reading Wifi") ; 


} 


void loop() { 
digitalWrite(LED |] MMIEIN ¢ lalIGlel)) 2 
delay(1000); 
digitalWrite (LE ae TIN, LOW); 
delay(1000); 


To change the SSID name, edit the text between double quotes 
in the WiFi.softAP() function. The example above will create a 
network called "Free Reading Wifi." You can change the SSID if 
you want. 


Your network's SSID name can be up to 32 characters long, but 
in practice you should stick to 31 characters. That's because 
some devices use null-terminated strings for SSID names. 


Click the Upload icon to upload the program to your Wemos 
D1 mini. When it's finished, look at the available wi-fi networks 
and you should see the one you just created. (If you try to 
connect, nothing will happen.) 


e)LI>e OvkKOA 
Captive portal approach 17: 
Write HTML in the Arduino IDE 
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Now let's make a captive portal! With this approach, you'll store 
the complete HTML code for your web page as a string variable 
in your program. The advantages are that all your code will be 
in one place, and you won't need any extra plugins. 


However, this approach has some limitations. You'll only be 
able to create a single page, without any links. You can use 
images, but only ones that are 20 KB or smaller. And you'll only 
be able to post short documents, a few thousand words or 
less. 


If you Know what you're doing and you just want to build a 
more complex site, it's OK to skip this section! 


=) Create a minimal example page 


Here's the code for a minimal captive portal page, which simply 
displays the word "Hello!" The important parts, for the 
purposes of this tutorial, are in bold. 


#include <ESP8266WiFi.h> 
#include <DNSServer.h> 
#include <ESP8266WebServer.h> 


const byte DNS PORT = 53; 
WACchaSss EPI, 217, Be, Ws 
DNSServer dnsServer; 
ESP8266WebServer webServer (80) ; 


String responseHTML = "<!DOCTYPE html>" 
"<html>" 

"<head>" 

"<title>A Minimal Example Page</title>" 
"</head>" 

"<body>" 

"<p>Hello!</p>" 

"</body>" 

"</html>"; 


void setup() { 
pinMode (LED BUILTIN, OWA UA) 
WiFi.mode (WIFI AP); 


Walltal “SOureNkCoydicstic; (yo, Elsie, MWeNclohease (255, 255, 255, 0)) )) f 
WiFi.softAP("Minimal Example Wifi") ; 
dnsServer.start (DNS PORT, "*", apIP); 
webServer.onNotFound([]() { 

webServer.send(200, "text/html", responseHTML) ; 

digitalWrite (LED BUILTIN, LOW) ; 

delay (500); 
digitalWrite (LED BUILTIN, HIGH) ; 
})e 
webServer.begin(); 


} 


void loop() { 

if (WiFi.softAPgetStationNum() == 0) 

{ 
delay (100); 

; else { 
delay (100); 
OnsServer.processNextRequest () > 
webServer.handleClient (); 


